<template>
  <div>
    <!-- 所有罚单 -->
     <el-button type="primary" @click="add()">增加</el-button>
    <el-table
      :data="TravelCard"
      style="width: 100%"
      :default-sort="{ prop: 'date' }"
    >
     <el-table-column label="序号" type="index" prop="index" sortable>
        <template slot-scope="scope">
          <span>{{ (page.current - 1) * page.size + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
			<el-table-column label="行驶证号">
			  <template slot-scope="scope">
			    <span style="margin-left: 10px">{{ scope.row.travelCarId }}</span>
			  </template>
			</el-table-column>
      <el-table-column label="车牌号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.carNo }}</span>
        </template>
      </el-table-column>

     <el-table-column label="车俩类型" style="width: 10px;">
        <template slot-scope="scope">
          <span style="margin-left: 10px;width: 10px;">{{ scope.row.carClazz }}</span>
        </template>
      </el-table-column>
      <el-table-column label="行驶证所有人">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.cardId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="使用性质">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.userNature }}</span>
        </template>
      </el-table-column>
      <el-table-column label="失效日期" prop="date" sortable>
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.invalidDate }}</span>
        </template>
      </el-table-column>

	  <el-table-column label="品牌型号">
	    <template slot-scope="scope">
	      <span style="margin-left: 10px">{{ scope.row.brandModel }}</span>
	    </template>
	  </el-table-column>
	  <el-table-column label="车辆识别代号">
	    <template slot-scope="scope">
	      <span style="margin-left: 10px">{{ scope.row.vin }}</span>
	    </template>
	  </el-table-column>
	  <el-table-column label="发动机号">
	    <template slot-scope="scope">
	      <span style="margin-left: 10px">{{ scope.row.engineNo }}</span>
	    </template>
	  </el-table-column>
	  <el-table-column label="行驶证状态">
	    <template slot-scope="scope">
	      <span style="margin-left: 10px">{{ scope.row.state }}</span>
	    </template>
	  </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span style="margin-left: 10px" @click="update(scope.row)">修改</span>
          <span style="margin-left: 10px" @click="backout(scope.row)">注销</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="创建时间" prop="date" sortable>
        <template slot-scope="scope">
          <span>{{ formatTimer(scope.row.createTime) }}</span>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      :spam="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[3, 5, 10, 50]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      style="text-align: center"
    >
    </el-pagination>

    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="30%">

       <el-form ref="TravelCardForm" label-width="80px">
         <br>
         <el-form-item label="行驶证号" >
           <el-col :span="22">
             <el-input placeholder="请输入行驶证号" v-model="TravelCardForm.travelCarId"></el-input>
           </el-col>
         </el-form-item>

         <el-form-item label="车牌号" >
           <el-col :span="22">
             <el-input placeholder="请输入车牌号" v-model="TravelCardForm.carNo"></el-input>
           </el-col>
         </el-form-item>

        <el-form-item label="车俩类型" >
           <el-col :span="22">
             <el-input placeholder="请输入车俩类型" v-model="TravelCardForm.carClazz" ></el-input>
           </el-col>
         </el-form-item>
         <el-form-item label="行驶证所有人" >
           <el-col :span="22">
             <el-input placeholder="请输入行驶证所有人" v-model="TravelCardForm.cardId"></el-input>
           </el-col>
         </el-form-item>

         <el-form-item label="使用性质">
           <el-col :span="22">
             <el-input placeholder="请输入使用性质" v-model="TravelCardForm.userNature"></el-input>
           </el-col>
         </el-form-item>
         <el-form-item label="品牌型号">
           <el-col :span="22">
             <el-input placeholder="请输入品牌型号" v-model="TravelCardForm.brandModel"></el-input>
           </el-col>
         </el-form-item>
         <el-form-item label="车辆识别代号">
           <el-col :span="22">
             <el-input placeholder="请输入车辆识别代号" v-model="TravelCardForm.vin"></el-input>
           </el-col>
         </el-form-item>
         <el-form-item label="发动机号">
           <el-col :span="22">
             <el-input placeholder="请输入发动机号" v-model="TravelCardForm.engineNo"></el-input>
           </el-col>
         </el-form-item>

         <el-form-item label="失效日期">
           <el-col :span="22">
             <el-date-picker
                   v-model="TravelCardForm.invalidDate"
                   type="datetime"
                   placeholder="选择日期"
                   value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
             </el-date-picker>
           </el-col>
         </el-form-item>
         <el-form-item label="档案号">
           <el-col :span="22">
             <el-input placeholder="请输入档案号" v-model="TravelCardForm.fileNo"></el-input>
           </el-col>
         </el-form-item>
         <el-form-item label="行驶证状态">
           <el-col :span="22">
             <el-input placeholder="请输入行驶证状态" v-model="TravelCardForm.state"></el-input>
           </el-col>
         </el-form-item>
       </el-form>

       <span slot="footer" class="dialog-footer">
         <el-button @click="isShow = false">取 消</el-button>
         <el-button type="primary" @click="saveInfo">保存</el-button>
       </span>
     </el-dialog>


     <!-- 对话框 -->
     <el-dialog :title="title" :visible.sync="isShow1" width="30%">

        <el-form ref="TravelCardForm1" label-width="80px">
          <br>
          <el-form-item label="行驶证号" >
            <el-col :span="22">
              <el-input placeholder="请输入行驶证号" v-model="TravelCardForm.travelCarId" readonly></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="车牌号" >
            <el-col :span="22">
              <el-input placeholder="请输入车牌号" v-model="TravelCardForm.carNo" readonly></el-input>
            </el-col>
          </el-form-item>

         <el-form-item label="车俩类型" >
            <el-col :span="22">
              <el-input placeholder="请输入车俩类型" v-model="TravelCardForm.carClazz" ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="行驶证所有人" >
            <el-col :span="22">
              <el-input placeholder="请输入行驶证所有人" v-model="TravelCardForm.cardId"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="使用性质">
            <el-col :span="22">
              <el-input placeholder="请输入使用性质" v-model="TravelCardForm.userNature"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="品牌型号">
            <el-col :span="22">
              <el-input placeholder="请输入品牌型号" v-model="TravelCardForm.brandModel"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="车辆识别代号">
            <el-col :span="22">
              <el-input placeholder="请输入车辆识别代号" v-model="TravelCardForm.vin"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="发动机号">
            <el-col :span="22">
              <el-input placeholder="请输入发动机号" v-model="TravelCardForm.engineNo"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="失效日期">
            <el-col :span="22">
              <el-date-picker
                    v-model="TravelCardForm.invalidDate"
                    type="datetime"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="档案号">
            <el-col :span="22">
              <el-input placeholder="请输入档案号" v-model="TravelCardForm.fileNo"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="行驶证状态">
            <el-col :span="22">
              <el-input placeholder="请输入行驶证状态" v-model="TravelCardForm.state"></el-input>
            </el-col>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="isShow1 = false">取 消</el-button>
          <el-button type="primary" @click="saveInfo">保存</el-button>
        </span>
      </el-dialog>
  </div>
</template>
<script>
import Url from "@/util/URLUtil";
export default {
  name: "AllTravelCard",
  data() {
    return {
      TravelCard: [],
      title:"新增",
      page: {
        current: 1, //当前页
        size: 5, //每页数据条数
        pages: 0, //总页数
        total: 0, //总数据条数
      },
      TravelCardForm:{
        id:null,
        travelCarId:"",
        carNo:"",
        carClazz:"",
        cardId:"",
        userNature:"",
        brandModel:"",
        vin:"",
        engineNo:"",
        invalidDate:"",
        fileNo:"",
        state:""
      },
      TravelCardForm1:{
        id:null,
        travelCarId:"",
        carNo:"",
        carClazz:"",
        cardId:"",
        userNature:"",
        brandModel:"",
        vin:"",
        engineNo:"",
        invalidDate:"",
        fileNo:"",
        state:""
      },
      isShow: false,
      isShow1: false,
    };
  },
  methods: {
    //初始化表格数据
    initAllTicketTable() {
      var self = this;
      $.ajax({
        url: Url.url + "/api/getAllTravelCard",
        type: "get",
        contentType: "application/json",
        // dataType: "json",
        data: { current: self.page.current, size: self.page.size },
        success(response) {
          // console.log(response);
          self.TravelCard = response.records;
          self.page.total = response.total;
          self.page.size = response.size;
          self.page.current = response.current;
          self.page.pages = response.pages;
        },
      });
    },
    add(){
      //更改模态框的标题
      this.title="新增";
      //显示模态框
      this.isShow=true;
      //清除表单元素
      this.TravelCardForm.travelCarId="";
      this.TravelCardForm.carNo="";
      this.TravelCardForm.carClazz="";
      this.TravelCardForm.cardId="";
      this.TravelCardForm.userNature="";
      this.TravelCardForm.brandModel="";
      this.TravelCardForm.vin="";
      this.TravelCardForm.engineNo="";
      this.TravelCardForm.invalidDate="";
      this.TravelCardForm.fileNo="";
      this.TravelCardForm.state="";
    },
    //处理罚单
    update(row){
       //更改模态框的标题
       this.title="修改";
       //显示模态框
       this.isShow1=true;
        //显示表单元素
       this.TravelCardForm1.travelCarId=row.travelCarId;
       this.TravelCardForm1.carNo=row.carNo;
       this.TravelCardForm1.carClazz=row.carClazz;
       this.TravelCardForm1.cardId=row.cardId;
       this.TravelCardForm1.userNature=row.userNature;
       this.TravelCardForm1.brandModel=row.brandModel;
       this.TravelCardForm1.vin=row.vin;
       this.TravelCardForm1.engineNo=row.engineNo;
       this.TravelCardForm1.invalidDate=row.invalidDate;
       this.TravelCardForm1.fileNo=row.fileNo;
       this.TravelCardForm1.state=row.state;
       console.log(this.TravelCardForm);
    },
    //撤销罚单
    backout(row){
      var mythis = this;
      console.log(row)
       this.$confirm("你确定要删除数据吗?").then(function() {
         $.ajax({
           url: Url.url + "/aqi/deleteTravelCard/"+row.carNo,
           type: "delete",
           success: function(data) {
             console.log(data.info)
             mythis.$message(data.info)
             if (data.info == "删除成功") {
               //刷新
               mythis.initAllTicketTable();
             }
           }
         })
       });
    },
    //修改每页尺寸
    handleSizeChange(val) {
      this.page.size = val;
      this.page.current = 1;
      this.initAllTicketTable();
    },
    saveInfo(){
      var mythis = this;
       var url = "";
       var type="";
        if (this.title == "新增") {
          url = Url.url + "/aqi/travelCard";
          type="post";
        } else {
          url =  Url.url + "/aqi/updateTravelCard";
          type="put";
        }
        console.log(mythis.TravelCardForm);
        $.ajax({
          url: url,
          type: type,
          contentType: "application/json",
          data:JSON.stringify(mythis.TravelCardForm),
          success: function(data) {
            console.log(data)
            mythis.$message(data.info)
            if (data.info == "添加成功"||data.info=="修改成功") {
              //关闭模态框
              mythis.isShow = false;
              //刷新
              mythis.initAllTicketTable();
            }
          }
        })
    },
    //修改当前页
    handleCurrentChange(val) {
      this.page.current = val;
      this.initAllTicketTable();
    },
    //日期格式化工具
    formatTimer(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    },
  },
  mounted() {
    this.initAllTicketTable();
  },
};
</script>
